<template>
	<div class="cif-range">
		<div class="cif-range-label">
			{{ props.data.displayName }}
		</div>
		<div class="cif-range-wrapper">
			<el-slider
				v-model="value"
				size="small"
				:name="props.data.name"
				:min="config.min"
				:max="config.max"
				:step="config.step || 1"
				@input="handleInput">
				<!-- <span slot="prefix">$</span> -->
				<!-- <span slot="suffix">.00</span> -->
				<template v-if="config.prefix" #prepend>{{ config.prefix }}</template>
				<template v-if="config.suffix" #append>{{ config.suffix }}</template>
			</el-slider>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, inject, watch } from 'vue';
import { findConfigDataByName } from '@CIF/Utils/reduce-config';
import _ from 'lodash';

const configuration: any = inject('configuration');
const props = defineProps({
	data: {
		type: Object,
		default() {
			return {};
		}
	}, // cpntTreeNode
	arrayName: String,
	childName: String
});

const emit = defineEmits(['handleValueChange']);
const value = ref(props.data.value);
const config = ref(props.data.config || {});
watch(
	() => props.data,
	(nv) => {
		value.value = nv.value;
	}
);

function handleInput() {
	if (_.get(window, 'cif.config.logger.enable', false) === true) {
		console.log('CIF.CC.CCT.C.Range:handleChange 值发生变更', value.value);
	}
	let c = typeof configuration === 'function' ? configuration() : configuration;
	if (props.arrayName) {
		let data = findConfigDataByName(c, props.arrayName);
		data = findConfigDataByName(data.value, props.childName);
		data = findConfigDataByName(data.value, props.data.name);
		data.value = value.value;
	} else {
		let data = findConfigDataByName(c, props.data.name);
		data.value = value.value;
	}
	// 触发值变动通知
	emit('handleValueChange');
}

onMounted(() => {});
defineExpose({});
</script>

<style lang="scss" scoped>
.cif-range {
	display: flex;
	margin-bottom: 10px;
	&-label {
		display: inline-block;
		overflow: hidden;
		line-height: 28px;
		white-space: nowrap;
		text-align: right;
		vertical-align: middle;
		margin-right: 10px;
	}
	&-wrapper {
		flex: 1;
	}
}
</style>
